<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动物体类</title>
    <style>

    </style>
</head>

<body>
<!-- <img src="img/小飞机爆炸.gif" alt=""> -->
</body>

</html>
<script src="./jquery-3.4.1.js"></script>
<script>


    // 地图类
    // width(宽), height（高）,step（速度）， bg_img(背景图)，bg_top（背景图移动）
    class MAP {
        constructor(json) {
            let default_obj = {
                width: "480px",
                height: "700px",
                step: 1,
                bg_img: "img/bg.jpg",
                bg_top: 0
            }
            for (let key in default_obj) {
                if (json[key] != undefined) {
                    this[key] = json[key];
                } else {
                    this[key] = default_obj[key];
                }
            }
            this.$ = $("<div></div>");
            this.father = document.body;
            this.timer = null;
            this.enemys=[];

        }
        create_ui() {
            this.$.css({
                "position": "relative",
                "margin": "0 auto",
                "overflow": "hidden",
                "width": this.width,
                "height": this.height,
                "background-image": "url(" + this.bg_img + ")",
                "background-position-y": this.bg_top + "px",
            });
            this.father.appendChild(this.$[0]);
        }
        move() {
            this.timer = setInterval(() => {
                this.bg_top += this.step;
                if (this.bg_top >= 853) {
                    this.bg_top = 0;
                }
                this.$.css({ "background-position-y": this.bg_top + "px" });
            }, 10)
        }
        start() {
            this.create_ui();
            this.move();
        }
    }
    // 2移动的物体类
    class Mover {
        constructor(json) {
            let default_obj = {
                width: "50px",
                height: "70px",
                step: 5,
                bg_img: "img/我的飞机.gif",
                boom_img:"img/本方飞机爆炸.gif",
                dir_l: 0,
                dir_t: 0,
                origin_hp:100
            }
            for (let key in default_obj) {
                if (json[key] != undefined) {
                    this[key] = json[key];
                } else {
                    this[key] = default_obj[key];
                }
            }
            this.$ = $("<img>");
            this.timer = null;
            this.t = 600;
            this.l = 480 / 2 - parseInt(this.width) / 2;
            this.map = null;
            this.hp =this.origin_hp;
        }
        create_ui() {
            this.$.attr({ "src": this.bg_img });
            this.$.css({
                "width": this.width,
                "height": this.height,
                "position": "absolute",
                "top": this.t + "px",
                "left": this.l + "px",
            })
            this.map.$.append(this.$);
        }
        move() {
            this.timer = setInterval(() => {
                this.t += this.step * this.dir_t;
                this.l += this.step * this.dir_l;
                if (parseInt(this.map.height) - parseInt(this.height) <= this.t) {
                    this.t = parseInt(this.map.height) - parseInt(this.height);
                }
                if (this.t <= 0) {
                    this.t = 0;
                }
                if (parseInt(this.map.width) - parseInt(this.width) <= this.l) {
                    this.l = parseInt(this.map.width) - parseInt(this.width);
                }
                if (this.l <= 0) {
                    this.l = 0;
                }
                this.$.css({ "top": this.t + "px", });
                this.$.css({ "left": this.l + "px", });
            }, 20)
        }
        start() {
            this.create_ui();
            this.move()
        }
    }
    // 03 玩家类
    class Player extends Mover {//继承mover类
        constructor(json) {
            super(json);
            this.bulltes = [];
            this.bulltes_timer = null;

        }
        fire() {//开火
            this.bulltes_timer = setInterval(() => {//创建子弹
                let json_01 = {
                    width: "6px",
                    height: "14px",
                    step: 8,
                    bg_img: "img/bullet1.png",
                    dir_l: 0,
                    dir_t: -1,
                    plane: this,
                    l: parseInt(this.$[0].offsetLeft) + 5,
                    t: parseInt(this.$[0].offsetTop) - 0
                }
                let json_02 = {
                    width: "6px",
                    height: "14px",
                    step: 8,
                    bg_img: "img/bullet1.png",
                    dir_l: 0,
                    dir_t: -1,
                    plane: this,
                    l: parseInt(this.$[0].offsetLeft) + 40,
                    t: parseInt(this.$[0].offsetTop) - 0
                }


                let bulltes_01 = new Bullte(json_01);//调用子弹json
                let bulltes_02 = new Bullte(json_02);

                bulltes_01.map = this.map;
                bulltes_02.map = this.map;
                bulltes_01.start()
                bulltes_02.start()
                this.bulltes.push(bulltes_01)
                this.bulltes.push(bulltes_02)
            }, 200)

        }
        control() {
            document.body.onkeydown = (event) => {//键盘按下
                let evt = event || window.event;
                switch (evt.keyCode) {//获取按键的键码
                    case 38: //上
                        this.dir_t = -1;
                        break;
                    case 40: //下
                        this.dir_t = 1;
                        break;
                    case 37: //左
                        this.dir_l = -1;
                        break;
                    case 39: //右
                        this.dir_l = 1;
                        break;

                }
            }
            document.body.onkeyup = (event) => {
                let evt = event || window.event;
                this.dir_t = 0;
                this.dir_l = 0;

            }
        }
        boom(){
            for(let enemy of this.map.enemys){
                let e_l = enemy.l, e_r = enemy.l+ parseInt(enemy.width);
                let e_t = enemy.t, e_b = enemy.t+ parseInt(enemy.height);
                let p_l = this.l, p_r = this.l+parseInt(this.width);
                let p_t = this.t, p_b = this.t+parseInt(this.height);       
                if((e_l<p_r && e_r>p_l) && (e_t<p_b && e_b>p_t)){
                    if(this.$.attr("src")==this.bg_img){
                        this.$.attr({"src":this.boom_img});
                        alert("你挂了");
                        clearInterval(this.bulltes_timer);
                        this.dir_l = 0;
                        this.dir_t = 0;
                        let timer = setTimeout(() => {
                            this.$.remove()
                            clearTimeout(timer)
                        }, 300);                        
                    }
                }
            }
        }   
        move(){
            this.timer = setInterval(() => {
                this.t += this.step * this.dir_t;
                this.l += this.step * this.dir_l;

                this.boom()

                if (parseInt(this.map.height) - parseInt(this.height) <= this.t) {
                    this.t = parseInt(this.map.height) - parseInt(this.height);
                }
                if (this.t <= 0) {
                    this.t = 0;
                }
                if (parseInt(this.map.width) - parseInt(this.width) <= this.l) {
                    this.l = parseInt(this.map.width) - parseInt(this.width);
                }
                if (this.l <= 0) {
                    this.l = 0;
                }

                this.$.css({
                    "top": this.t + "px"
                });
                this.$.css({
                    "left": this.l + "px"
                });

            }, 20)
        }
       
        start() {
            this.create_ui();
            this.move();
            this.control();
            this.fire();
        }
    }

    //04子弹类
    class Bullte extends Mover {
        constructor(json) {
            super(json);
            this.plane = json.plane;
            this.t = json.t;
            this.l = json.l;
        }

        move() {

            this.timer = setInterval(()=>  {
                this.t += this.step * this.dir_t;
                if (this.hitde() ||this.t <= -30) {
                    this.plane.bulltes.splice(this.plane.bulltes.indexOf(this), 1);
                    clearInterval(this.timer)
                    this.$.remove()

                }
                    this.$.css({ "top": this.t + "px", });
                    this.$.css({ "left": this.l + "px", });
                
                    
                
            }, 20);
        }

        //检测子弹和敌机碰撞

        // 子弹从上下两边发射
        /*敌机bottom距离地图top的距离(enemy_b)>子弹top距离地图top的距离(bulltes_t)&&
        敌机top距离地图bottom的距离(enemy_t)<子弹bottom距离地图bottom的距离(bulltes_b)*/

        // 子弹从左右两边发射
        /*敌机right距离地图right的距离(enemy_r)>子弹left距离地图right的距离(bulltes_l)&&
      敌机left距离地图left的距离(enemy_l)<子弹right距离地图left的距离(bulltes_r)*/
        hitde() {
            for (let enemy of this.map.enemys) {
                let e_l = enemy.l, e_r = enemy.l + parseInt(enemy.width);
                let e_t = enemy.t,e_b = enemy.t + parseInt(enemy.height);
                let b_l = this.l, b_r = this.l + parseInt(this.width);
                let b_t = this.t,b_b = this.t + parseInt(this.height);

                if ((e_b > b_t && e_t < b_b) && (e_r > b_l && e_l < b_r)) {
                    enemy.hp -= this.hp;
                    if(enemy.hp<=0 && enemy.$.attr("src")==enemy.bg_img){
                        enemy.$.attr({"src":enemy.boom_img});
                        enemy.boom();
                    }

                    return true;

                }
            }
            return false;
        }

    }

    // 05 敌机类
    class Enemy extends Mover {
        constructor(json) {
            super(json);
            this.t = json.t;
            this.l = json.l;
        }
        boom(){
            let timer = setTimeout(()=>{
                this.l = Math.random()*440;
                this.t = -Math.random()*1000-200;
                this.hp = this.origin_hp;
                this.$.attr({"src":this.bg_img});
                this.dir_t = 1;
                clearTimeout(timer)
            },300)
        }
        move() {
            this.timer = setInterval(() => {
                if(this.hp<=0){
                    this.dir_t = 0;
                }
                this.t += this.step * this.dir_t;
                this.l += this.step * this.dir_l;

              
                if ( parseInt(this.map.height) - parseInt(this.height) <= this.t) {

                    this.l = Math.random() * 395;
                    this.t = -Math.random() * 1000 - 200;
                    this.$.attr({"src":this.bg_img})
                }
                this.$.css({ "top": this.t + "px", });
                this.$.css({ "left": this.l + "px", });
            }, 20)

        }

    }

    //调用地图属性（背景图移动）
    let map = new MAP({});
    map.start();

    // 调用移动物体属性
    // let mover = new Mover({});
    // mover.map = map;
    // mover.start();

    //调用玩家类 （可操控）
    let play = new Player({});
    play.map = map;
    play.start();

    //调用敌机

    //小飞机
    for (let i = 0; i < 10; i++) {
        let json = {
            width: "34px",
            height: "24px",
            step: 8,
            bg_img: "img/enemy1_fly_1.png",
            boom_img:"img/小飞机爆炸.gif",
            dir_l: 0,
            dir_t: 1,
            // hp:100,
            l: Math.random() * 450,
            t: -Math.random() * 600,

        }
        let en = new Enemy(json);
        en.map = map;
        en.start();
        map.enemys.push(en);
    }
    //中飞机
    for (let i = 0; i < 6; i++) {
        let json = {
            width: "46px",
            height: "64px",
            step: 5,
            bg_img: "img/enemy3_fly_1.png",
            // attack_img:"img/中飞机挨打.png",
            boom_img:"img/中飞机爆炸.gif",

            dir_l: 0,
            dir_t: 1,
            origin_hp: 700,
            // hp:700,
            l: Math.random() * 440,
            t: -Math.random() * 700 - 200
        }
        let en = new Enemy(json);
        en.map = map;
        en.start();
        map.enemys.push(en);

    }
    //大飞机
    for (let i = 0; i < 3; i++) {
        let json = {
            width: "110px",
            height: "164px",
            step: 3,
            bg_img: "img/enemy2_fly_1.png",
            // attack_img:"img/大飞机挨打.png",
            boom_img:"img/大飞机爆炸.gif",
            dir_l: 0,
            dir_t: 1,
            origin_hp: 1300,
            // hp:1300,
            l: Math.random() * 420,
            t: -Math.random() * 800 - 200
        }
        let en = new Enemy(json);
        en.map = map;
        en.start();
       map.enemys.push(en);
    }
</script>